<script>
//2024/05/07 猫燐
//手机端底部导航组件
import { User, Setting, ChatSquare, Chicken } from "@element-plus/icons";
import { cfg } from "@/cfg/cfg.js";
import {
  Code,
  Api1,
  UpdateNow,
  Fish,
  ListBoxes,
  CloseFilled,
  WindowPreset,
  TextAlignJustify,
  Menu,
  LogoGithub,
} from "@vicons/carbon";

export default defineComponent({
  components: {
    ChatSquare,
    CloseFilled,
    ListBoxes,
    Chicken,
    User,
    WindowPreset,
    UpdateNow,
    Fish,
    Menu,
    Setting,
    Code,
    TextAlignJustify,
    LogoGithub,
    Api1,
  },
  setup() {
    cfg.drmenu = false;
    cfg.drmenu2 = false;
    let ct = {
      ck: (idx, ck) => {
        alert(ck);
        data.type = ck;
        cfg.router.replace({
          query: {
            ...cfg.route.query,
            type: ck,
          },
        });
      },
    };

    const tabhand = (ck) => {
      if (ck.name == "index") {
        cfg.drmenu2 = true;
      } else {
        cfg.router.push({
          query: {
            type: cfg.route.query.type,
            type2: ck.name,
          },
        });
      }
    };

    let data = reactive({
      type: cfg.route.query.type,
    });
    return {
      ct,
      cfg,
      data,
      tabhand,
    };
  },
});
</script>

<template>
  <van-popup v-model:show="cfg.drmenu" position="bottom">
    <router-link
      v-for="item in $cfg.menulv1"
      @click="cfg.drmenu = false"
      :to="{ name: 'gt_index', query: { type: item.ck } }"
    >
      <van-cell :title="item.title" />
    </router-link>
    <router-link
      @click="cfg.drmenu = false"
      :to="{
        name: 'gt_index',
        query: {
          type: 'theme',
          type2: 'theme',
        },
      }"
    >
      <van-cell title="主题" />
    </router-link>
    <van-cell
      v-if="cfg.user?.uid == null"
      @click="
        cfg.loginif = true;
        cfg.drmenu = false;
      "
      title="登录账号"
    />

    <n-hr />
    <div class="dr_menu_d1" @click="cfg.drmenu = false">关闭窗口</div>
  </van-popup>

  <van-popup v-model:show="cfg.drmenu2" position="top" :style="{ height: '100%' }">
    <div
      style="
        margin-top: 12px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 12px;
      "
    >
      <div>
        <van-tabs type="card">
          <template v-for="item in $cfg.menulv1">
            <van-tab
              :name="item.ck"
              :title="item.ck"
              :to="{ name: 'gt_index', query: { type: item.ck } }"
            >
              <template #title>{{ item.title }}</template>
            </van-tab>
          </template>
          <van-tab :to="{ name: 'gt_index', query: { type: 'theme', type2: 'theme' } }">
            <template #title>其他</template>
          </van-tab>
        </van-tabs>
        <router-link
          v-for="item in $cfg.menulv2"
          @click="cfg.drmenu2 = false"
          :to="{
            name: 'gt_index',
            query: { type: cfg.route.query.type, type2: item.ck },
          }"
        >
          <van-cell :title="item.title" />
        </router-link>
      </div>
      <div>
        <van-cell
          v-if="cfg.user?.uid == null"
          @click="
            cfg.loginif = true;
            cfg.drmenu2 = false;
          "
          title="登录账号"
        />
        <van-cell @click="cfg.drmenu2 = false" title="关闭窗口" />
      </div>
    </div>
  </van-popup>
  <div class="div1 disable-swipe" :class="`btm_${cfg.route.name}`">
    <van-tabs :ellipsis="false" @click-tab="tabhand" line-height="0px">
      <van-tab name="index" title="目录">
        <template #title><van-icon name="circle" /> 分类</template>
      </van-tab>
      <van-tab v-for="item in $cfg.menulv2" :name="item.ck" :title="item.title"></van-tab>
    </van-tabs>
  </div>
</template>
